@extends('layouts.base')

@section('title',$title)
@section('keyWords',$keyWord)
@section('description',$description)

@section('content')
    <div class="well">
        @include('partials.topReviewShows')
    </div>
    <div class="well">
        <h1 class="text-center lead text-primary">最新-美剧资源下载-百度网盘-迅雷下载-美剧种子-美剧磁力</h1>
        <div class="Card-Collection">
            @foreach($shows as $show)
                <div class="Card">

                    <div class="Card__image">

                        <a href={{url('show',[$show])}}>
                            <img data-original="{{$show->coverage_url}}" class="Card__image lazy" alt="{{$show->name_en.$show->name_zh}}">

                            <div class="Card__overlay">
                                <i class="glyphicon glyphicon-flash" aria-hidden="true"></i>
                            </div>
                        </a>

                    </div>
                    <a href={{url('show',[$show])}}><h2>{{$show->name_en.$show->name_zh}}</h2></a>

                    <p>{{$show->excerpt}}</p>

                    <div class="CardFooter">
                        <a href="{{url('show',[$show])}}" class="CardIcon my-float-left" >下载资源: <span class="badge">{{$show->episodes()->count()}}</span></a>
                        &nbsp
                        &nbsp
                        <strong class="CardCreatedTime my-float-right">{{'更新:'.$show->updated_at->diffForHumans()}}</strong>

                    </div>

                </div>

            @endforeach
        </div>
        <div class="row">
            {!! $shows->render() !!}

        </div>
    </div>


@endsection


@section('scripts')
    <script>
        $(document).ready(function() {
            $('#slider').slick({
                dots: false,
                lazyLoad: 'ondemand',
                centerMode: true,
                slidesToShow: 3,
                autoplay: true,
                autoplaySpeed: 1000,
                responsive: [
                    {
                        breakpoint: 970,
                        settings: {
                            arrows: false,
                            centerMode: true,
                            centerPadding: '40px',
                            slidesToShow: 3
                        }
                    },
                    {
                        breakpoint: 750,
                        settings: {
                            arrows: false,
                            centerMode: true,
                            centerPadding: '40px',
                            slidesToShow: 1
                        }
                    }
                ]

            });
        });
        $(function() {
            $("img.lazy").lazyload();
        });
    </script>
@endsection